<!-- 创建 vue 文件 -->

<script setup>
  import {ref} from 'vue';
  const isHide = ref(true)
  // 这个在打包的时候有默认导出 所以不用
</script>

<template>
  <div class="panel">
    <div class="title">
      <!-- 标题 -->
      <h4>自由与爱情</h4>
      <span
        @click="isHide = !isHide"
        class="btn"
      >{{ isHide ? '展开' : '收起' }}</span>
    </div>
    <div
      class="container"
      v-show="!isHide"
    >
      <p>生命诚可贵，</p>
      <p>爱情价更高。</p>
      <p>若为自由故，</p>
      <p>两者皆可抛。</p>
    </div>
  </div>
</template>


<style lang="scss">
  .panel {

    .title {
      border: 1px solid #ccc;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 1em;

      border: 1px solid #ccc h4 {
        line-height: 2;
        margin: 0;
      }

    }

    .container {
      border: 1px solid #ccc;
      padding: 0 1em;
      border-top-color: transparent;
    }

    .btn {
      cursor: pointer;
    }

  }
</style>